<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="订单详情"
        left-arrow
        @click-left="$router.back()"
        >
        <template #right>
          <van-icon class="dot" name="weapp-nav" />
        </template>
      </van-nav-bar>
    </header>
    <div class="content orderRes">
      <div class="top">
        <div class="top quxiao" v-if="state == 1 ? 1 : ''">
          <van-icon name="clock"/>
          <div class="ccon">
            <div class="t">
              <span class="desc">等待付款</span>
              <span class="timeLeft">支付剩余00时28分21秒</span>
            </div>
            <div class="b">应付金额：¥ <span> {{price - 20 - 15}}</span></div>
          </div>
        </div>
        <div class="wancheng" v-if="state == 0 ? 1 : ''">
          <van-icon name="checked"/>
          <div class="ccon">
            <div class="t">
              <span class="desc">已签收</span>
            </div>
            <div class="b">您的订单已签收，祝您购物愉快</div>
          </div>
        </div>
        <div class="fukuan" v-if="state == 3 ? 1 : ''">
          <van-icon name="warning"/>
          <div class="ccon">
            <div class="t">
              <span class="desc">已取消</span>
            </div>
            <div class="b">取消原因：超时未支付</div>
          </div>
        </div>
      </div>
      <div class="addr">
        <div class="addrcont">
          <van-icon name="location" />
          <div class="cont_text">
            <div class="wl_text">{{addr.name}} {{addr.tel}}</div>
            <span class="wl_tip">{{addr.address}}</span>
          </div>
          <div class="wl_edit">修改</div>
        </div>
      </div>
      <div class="procont" v-for="item in Data.proData" :key="item.proId">
        <div class="procont_top">
          <div class="icon_pop"></div>
          <div class="shopname">
            <span>京东</span>
            <van-icon name="arrow" />
          </div>
          <div class="state">共计{{item.num}}件商品</div>
        </div>
        <div class="procont_center">
          <div class="cover" >
            <div class="wqvue-image img">
              <img :src="item.proImg">
            </div>
          </div>
          <div class="tex">
            <div class="desc">{{item.proName}}</div>
            <div class="price">
              <span class="p">￥{{item.price}}</span>
              <span class="x">x{{item.num}}</span>
            </div>
          </div>
        </div>
        <div class="procont_bottom">
          <div class="bc">
            <van-icon name="manager" />
            <div>联系客服</div>
          </div>
        </div>
      </div>
      <div class="detail">
        <div class="order_summary">
          <div class="inner_line">
            <span class="title">订单编号：</span>
            <div class="content">{{Data.orderId}}
            <div data-show-tip="copy" data-copy-cont="" class="content_copy">复制</div>
            </div>
            <div class="inner_total" v-if="show">应付金额：
              <span class="inner_price">¥ {{price - 20 - 15}}</span>
            </div>
          </div>
          <div class="inner_line" v-if="!show">
            <span class="title">下单时间：</span>
            <div class="content">2020-11-04 19:40:26</div>
          </div>
          <div class="inner_line" v-if="!show">
            <span class="title">支付方式：</span>
            <div class="content">在线支付</div>
          </div>
          <div class="inner_line" v-if="!show">
            <span class="title">配送方式：</span>
            <div class="content">普通快递</div>
          </div>
        </div>
        <div class="order_invoice_new" v-if="!show">
          <div class="invoice_detail">
            <div class="status">纸质发票：
              <span class="black">将由商家开具纸质发票</span>
            </div>
          </div>
        </div>
        <div class="order_total" v-if="!show">
          <div class="total_item">商品总额
            <span class="price">¥ {{price}}</span>
          </div>
          <div class="total_item">运费
            <span class="price">+ ¥ 0.00</span>
          </div>
          <div class="total_item">促销立减
            <span class="price">- ¥ 20.00</span>
          </div>
          <div class="total_item">商品优惠
            <span class="price">- ¥ 15.00</span>
          </div>
          <div class="total">应付金额：
            <span class="price">¥ {{price - 20 - 15}}</span>
          </div>
        </div>
        <div class="comm_order_more">
          <div class="more_text" data-attr-name="summaryOpen" @click="Show">
            <span v-if="show">展开详细信息</span>
            <span v-else>展开详细信息</span>
            <van-icon name="arrow-down" v-if="show"/>
            <van-icon name="arrow-up" v-else/>
          </div>
        </div>
      </div>
    </div>
    <div class="order_btn fixed_btn">
      <div class="order_btn_com">
        <div class="oh_btn bg_border_red">再次购买</div>
        <div class="oh_btn bg_white" @click="del">删除订单</div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Icon } from 'vant'

import { getOrderRes, delOrder } from '../../api/index.js'
// , delOrder
Vue.use(NavBar)
Vue.use(Icon)

export default {
  props: ['id'],
  data () {
    return {
      state: '',
      show: true,
      addr: {
        tel: 18774563180,
        name: '美女',
        address: '湖南省湘潭市湘潭县'
      },
      Data: {},
      price: 0
    }
  },
  methods: {
    Show () {
      this.show = !this.show
    },
    del () {
      console.log(this.id)
      delOrder({
        orderId: this.id
      }).then(data => {
        this.$router.back()
      })
    }
  },
  mounted () {
    getOrderRes({
      userId: localStorage.getItem('userId'),
      orderId: this.id
    }).then(data => {
      console.log(data.data.data)
      this.Data = data.data.data
      this.state = data.data.data.state
      data.data.data.proData.forEach((val) => {
        this.price += (val.num * val.price) * 1
      })
    })
  },
  computed: {
  }
}
</script>

<style lang="scss">
.van-icon.van-icon-weapp-nav.dot{
  color:#000;
  font-size: 22px;
}
.content.orderRes{
  background-color: #f7f7f7;
  padding-bottom: 0.6rem;
  .quxiao,.wancheng,.fukuan{
    background-image: linear-gradient(90deg,#f66d70,#e93b3d);
    color: #fff;
    padding: 12px 10px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 18px;
    position: relative;
    .van-icon{
      font-size: 24px;
      color: #fff;
    }
    .ccon{
      flex: 1;
      margin-left: 10px;
      .t{
        line-height: 24px;
        position: relative;
        .desc {
          font-family: PingFangSC-Semibold;
          font-size: 16px;
          font-weight: 400;
        }
        .timeLeft {
          position: absolute;
          display: inline-block;
          right: 0;
          top: 0;
          z-index: 5;
        }
      }
    }
  }
  .addr{
    background-color: #fff;
    border-radius: 0 0 6px 6px;
    .addrcont{
      padding: 11px 10px 12px;
      align-items: center;
      position: relative;
      display: flex;
      .van-icon{
        font-size: 24px;
        color: #aaa;
      }
      .wl_edit {
        font-size: 12px;
        color: #999;
        line-height: 36px;
        width: 30px;
        text-align: right;
      }
      .cont_text{
        margin-left: 10px;
        position: relative;
        flex:1;
        .wl_text {
          font-size: 14px;
          line-height: 21px;
          color: #333;
        }
        .wl_tip {
          font-size: 12px;
          line-height: 18px;
          color: #999;
        }
      }
    }
  }
  .procont{
    border-radius: 10px;
    overflow: hidden;
    margin-top: 10px;
    background-color: #fff;
    padding:10px;
    .procont_top{
      padding:10px 0;
      font-family: PingFang-SC-Medium;
      line-height: 24px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e5e5e5;
      .icon_pop{
        background-image: url(https://wq.360buyimg.com/fd/h5/wxsq_dev/order/images/sprite_shop_icon@2x_143c33c4.png);
        background-size: 42px 20px;
        background-position: -22px 0;
        width: 20px;
        height: 20px;
        margin-right: 5px;
      }
      .shopname{
        flex:1;
        display: flex;
        align-items: center;
        justify-items: center;
        .van-icon.van-icon-arrow{
          color:#aaa;
        }
      }
      .state{
        font-size: 14px;
        color: #999;
      }
    }
    .procont_center{
      margin-top: 8px;
      display: flex;
      overflow: hidden;
      .cover{
        width: 75px;
        height: 75px;
        margin-right: 10px;
        border-radius: 6px;
        flex-shrink: 0;
        position: relative;
        display: flex;
        img{
          width: 100%;
          height: 100%;
          border-radius: 6px;
        }
      }
      .tex{
        width: 260px;
        .desc {
          width: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          line-height: 21px;
          color: #333;
          }
        .price{
          margin-top: 14px;
          line-height: 24px;
          font-size: 12px;
          .p{
            font-size: 16px;
            color: #f2270c;
            font-family: JDZH-Regular;
          }
          .x{
            color: #999;
            float: right;
          }
        }
      }
    }
    .procont_bottom{
      border-top: 1px solid #e5e5e5;
      padding-top: 16px;
      font-size: 12px;
      color: #999;
      line-height: 20px;
      margin-top: 20px;
      .bc{
        display: flex;
        justify-content: center;
        align-items: center;
        .van-icon{
          font-size: 16px;
          right: 6px;
        }
      }
    }
  }
  .detail{
    overflow: hidden;
    margin-top: 10px;
    background-color: #fff;
    border-radius: 10px;
    .order_summary {
      padding: 12px 10px;
      .inner_line {
        padding-top: 3px;
        font-size: 14px;
        line-height: 21px;
        position: relative;
        display: flex;
        .title {
          min-width: 70px;
          color: #999;
        }
        .content {
          width: 100%;
          color: #151515;
          .content_copy {
              position: relative;
              margin-left: 4px;
              display: inline-block;
              border: 1px solid #ccc;
              font-size: 10px;
              line-height: 14px;
              height: 14px;
              padding: 0 6px;
              color: #999;
              border-radius: 7px;
              vertical-align: 1px;
              .content_copy:before {
                content: "";
                display: inline-block;
                vertical-align: middle;
                width: 0;
                height: 100%;
                margin-top: 1px;
              }
          }
        }
        .inner_total {
          font-weight: 700;
          color: #333;
        .inner_price {
            color: #f2270c;
            font-family: JDZH-Regular;
          }
        }
      }
    }
    .comm_order_more {
      text-align: center;
      .more_text {
        display: inline-block;
        position: relative;
        font-size: 12px;
        color: #666;
        line-height: 18px;
        padding: 0 20px 10px 0;
        .van-icon{
          margin-left: 6px;
        }
      }
    }
    .order_invoice_new {
      padding: 12px 0 12px 10px;
      background: #fff;
      position: relative;
      color: #999;
      border-top: 1px solid #e5e5e5;
      border-bottom: 1px solid #e5e5e5;
      .invoice_detail{
        display: flex;
        align-items: center;
        .status {
          font-size: 14px;
          line-height: 21px;
          .black {
            color: #151515;
          }
        }
      }
    }
    .order_total {
      background: #fff;
      padding: 12px 10px;
      overflow: hidden;
      position: relative;
      border-radius: 0 0 10px 10px;
      font-size: 14px;
      .total_item {
        line-height: 21px;
        color: #333;
        font-weight: 400;
        position: relative;
        .price {
          float: right;
          font-family: JDZH-Regular;
          color: #f2270c;
        }
      }
      .total {
        float: right;
        margin-top: 8px;
        font-size: 16px;
        line-height: 24px;
        color: #333;
        font-weight: 700;
        .price {
          float: right;
          font-family: JDZH-Regular;
          color: #f2270c;
        }
      }
    }
  }
}
.order_btn.fixed_btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 333;
  padding-right: 10px;
  padding-bottom: env(safe-area-inset-bottom);
  flex-direction: row-reverse;
  font-size: 14px;
  color: #333;
  line-height: 30px;
  box-shadow: 0 -2px 4px 0 rgba(0,0,0,.07);
  display: flex;
  background-color: #fff;
  .order_btn_com {
    flex: 1;
    justify-content: flex-start;
    flex-direction: row-reverse;
    display: flex;
    .oh_btn {
      padding: 0 10px;
      text-align: center;
      min-width: 56px;
      height: 28px;
      line-height: 28px;
      border-radius: 15px;
      margin: 10px 0 10px 10px;
      -webkit-flex-shrink: 0;
      flex-shrink: 0;
      position: relative;
    }
    .bg_border_red {
      color: #f2270c;
      background: #fff;
      border: 1px solid #f2270c;
      box-shadow: 0 3px 6px 0 rgba(242,39,12,.1);
    }
    .bg_white {
      background: #fff;
      border: 1px solid #ccc;
      box-shadow: 0 3px 6px 0 rgba(0,0,0,.05);
    }
  }
}
</style>
